package myJs.components

import cats.effect.SyncIO
import japgolly.scalajs.react._
import japgolly.scalajs.react.component.Scala.BackendScope
import japgolly.scalajs.react.extra.{ReusabilityOverlay, StateSnapshot}
import japgolly.scalajs.react.vdom.all._
import myJs.Implicits._
import myJs.myPkg.jquery._
import myJs.tool.Tool
import myJs.tool.Tool._

import scala.collection.immutable.SeqMap

/**
 * Created by yz on 3/11/2020
 */
object SelectComponent {

  case class Props(state: StateSnapshot[String], label: String, name: String, optionMap: SeqMap[String, String],
                   questionInfo: String = "", show: Boolean = true,selfClass:String="") {
    @inline def render: VdomElement = Component(this)
  }

  class Backend(bs: BackendScope[Props, Unit]) {

    def didMount = {
      SyncIO {
        Tool.popover
        ()
      }
    }

    def render(p: Props) = {

      def valueChange(e: ReactEventFromInput) = {
        val myValue = e.target.value
        p.state.modState(x => myValue)
      }

      val s = p.state.value
      div(`class` := "form-group col-sm-12", paddingRight := "0px", paddingLeft := "0px",
        (display := "none").unless(p.show),
        label(
          s"${p.label}", span(`class` := "",
            a(`type` := "button", `class` := "selfQuestion", title := messages("note"), VdomAttr("data-container") := "body",
              VdomAttr("data-toggle") := "popover", VdomAttr("data-html") := "true",
              VdomAttr("data-placement") := "left",
              VdomAttr("data-content") := p.questionInfo,
              VdomAttr("data-trigger") := "click",
              i(`class` := "fa fa-question-circle-o")
            ),
          ).when(p.questionInfo.nonBlank), ":"
        ),
        select(`class` := s"form-control ${p.selfClass}", name := s"${p.name}", value := s"${s}", onChange ==> valueChange,
          p.optionMap.toVdomArray { case (v, text) =>
            option(value := s"${v}", s"${text}")
          }
        )
      )
    }

  }

  val Component = ScalaComponent.builder[Props].renderBackend[Backend].
    componentDidMount(x => x.backend.didMount).
    build

}



